import React, {Component}    from 'react';
import BaseNavigationBar     from '../../views/BaseNavigationBar';
import {
    StyleSheet,
    View,
    ScrollView,
    Dimensions,
    TouchableOpacity,
    Text,
    Image
} from 'react-native';
import ListItem                 from '../../views/ListItem.js';
import ListItemDivider          from '../../views/ListItemDivider.js';
import  ItemView                from '../../views/ItemView';
import  MyInfo                  from '../../utils/myInfo';
import  ItemCell                from '../../views/ItemCell';
import StorageUtil from "../../utils/StorageUtil";
import * as BaseAPI from "../../utils/BaseAPI";

const {width} = Dimensions.get('window');

export default class PersonalInfoScreen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            showProgress:false,
            Uid:'',
            NickName:'',
            Gender:''
        };
    }

    componentWillMount() {
        StorageUtil.get('token',(error,object)=>{
            if (!error && object != null)
            {
                this.getUserInfoData(object.token);
            }
        });
    }

    getUserInfoData(token){

        console.log('调取出');

        this.setState({showProgress:true});
        fetch(BaseAPI.GetUserInfoDataUrl+token, {
            method:'GET',
        }).then((res)=>res.json())
            .then((json)=>{

                console.log('呜呜呜获取用户信心555'+ json+ JSON.stringify(json));

                this.setState({showProgress:false});
                if (json.ret === 0){
                    this.setState({Uid:json.user.uid});
                    this.setState({NickName:json.user.nickname});
                    this.setState({Beans:json.user.pay_golds+json.user.golds});
                    this.setState({Balance:json.user.balance});
                    this.setState({Gender:json.user.gender});

                }else{
                    this.refs.toast.show('获取用户信息失败');
                }
            })
            .catch((e)=>{

                console.log('调取失败'+ e);

                this.setState({showProgress:false});
                this.refs.toast.show('网络请求出错：' + e);
            })
    }

    popToBack(){
        this.props.navigation.goBack()
    }

    /**渲染每一个Item*/
    renderItems(){
        var ItemBean=[];
        var CatetoryItems=this.state.items;
        for(var i=0;i<CatetoryItems.length;i++){
            var items=CatetoryItems[i];
            //每一组的分界线
            ItemBean.push(
                <View key={i}>
                    {/*<DividingLine/>*/}
                    <ListItemDivider/>
                </View>
            )
            //每一组
            for(var j=0;j<items.length;j++){
                var item=items[j];
                //最后一个Item不需要分界线
                if(j==items.length-1 || j==0){
                    ItemBean.push(
                        <View key={i+""+j}>
                            <ItemView option={item}/>
                        </View>
                    )
                }else{
                    ItemBean.push(
                        <View key={i+""+j}>
                            {/*<DividingSmallLine/>*/}
                            <ListItemDivider/>
                            <ItemView option={item}/>
                        </View>

                    )
                }
            }
        }
        ItemBean.push(
            <View key="last">
                {/*<DividingLine />*/}
                <ListItemDivider/>

            </View>

        )
        return ItemBean;
    }

    address(){

    }


    // 修改头像
    goChangeHeadImage(){
        this.props.navigation.navigate("ModifyHead")
    }


    render() {
        var genderTypeStr;
        if (this.state.Gender === 'f'){
            genderTypeStr = '女';
        } else {
            genderTypeStr = '男';
        }
        return (
            <View style={styles.container}>
                <BaseNavigationBar
                    title={'个人信息'}
                    leftImageSource={require('../../../images/other/ic_back.png')}
                    leftItemFunc={() => this.popToBack()}/>

                <ScrollView style={styles.content}>
                    <View style={{height:0.56*20}}/>

                    <TouchableOpacity activeOpacity={1} onPress={this.goChangeHeadImage.bind(this)}>
                        <View style={styles.headViewStyle}>
                            <Text style={styles.headStyle}>头像</Text>
                            <View style={{flex:1,backgroundColor:'white'}} />
                            <Image style={styles.imageHeader} source={{url:BaseAPI.GetUserAvatarDataUrl+this.state.Uid}}/>
                            {/*<Image style={styles.arrowIcon} source={require('../../../images/other/arrow.png')}/>*/}
                        </View>
                    </TouchableOpacity>

                    <ListItemDivider/>
                    <ItemCell title='昵称' subtitle={this.state.NickName}/>
                    <ListItemDivider/>
                    <TouchableOpacity activeOpacity={1} onPress={this.address.bind(this)}>
                        <ItemCell title='性别' subtitle={genderTypeStr} />
                    </TouchableOpacity>

                    {/*<ListItemDivider/>*/}
                    {/*<TouchableOpacity activeOpacity={1} onPress={this.address.bind(this)}>*/}
                        {/*<ItemCell title='出生日期' subtitle='2000.01.02' arrowImage={require('../../../images/other/arrow.png')}/>*/}
                    {/*</TouchableOpacity>*/}
                    <ListItemDivider/>

                    {/*<TouchableOpacity activeOpacity={1} onPress={this.address.bind(this)}>*/}
                        {/*<ItemCell title='兴趣爱好' subtitle='旅游 唱歌 火锅' arrowImage={require('../../../images/other/arrow.png')}/>*/}
                    {/*</TouchableOpacity>*/}
                    {/*<ListItemDivider/>*/}

                    <ItemCell title='小游ID' subtitle={this.state.Uid}/>

                    {/*{this.renderItems()}*/}

                    {/*<ListItem icon={require('../../../images/my/icon-xinxi.png')} text={"头像"} handleClick={() => {*/}
                    {/*this.props.navigation.navigate("Beans")*/}
                    {/*}}/>*/}
                    {/*<ListItemDivider/>*/}
                    {/*<ListItem icon={require('../../../images/my/icon-xinxi.png')} text={"性别"} handleClick={() => {*/}
                    {/*this.props.navigation.navigate("Beans")*/}
                    {/*}}/>*/}
                    {/*<ListItemDivider/>*/}
                    {/*<ListItem icon={require('../../../images/my/icon-xinxi.png')} text={"年龄"} handleClick={() => {*/}
                    {/*this.props.navigation.navigate("CashBalance")*/}
                    {/*}}/>*/}
                    {/*<ListItemDivider/>*/}


                    {/*<ListItem icon={require('../../../images/my/icon-xinxi.png')} text={"兴趣爱好"} handleClick={() => {*/}
                    {/*this.props.navigation.navigate("PersonalInfo")*/}
                    {/*}}/>*/}
                    {/*<ListItemDivider/>*/}
                    {/*<ListItem icon={require('../../../images/my/icon-jilu.png')} text={"小游ID"} handleClick={() => {*/}
                    {/*this.props.navigation.navigate("Records")*/}
                    {/*}}/>*/}
                    {/*<ListItemDivider/>*/}

                </ScrollView>
                <View style={styles.divider} />

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    headViewStyle:{
        backgroundColor:'white',
        height:0.56*118,
        width:width,
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center'
    },
    headStyle:{
        fontSize:16,
        marginLeft:0.56*32,
        color:'#333333'
    },
    imageHeader:{
        width:0.56*90,
        height:0.56*90,
        margin:0.56*10,
        borderRadius:0.56*45
    },
    arrowIcon:{
        width:19*0.56,
        height:32*0.56,
        marginRight:0.56*32
    }
});
